@import "../../../assets/styles/img.less";
@import "../../../assets/styles/variables.less";
@import "./index.skeleton.wxss";
.index_title{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  .text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 34rpx;
    font-weight: 500;
  }
}
movable-area {
  height: 100%;
  width: 100%;
}
.move-view {
  position: absolute;
  right: 20rpx;
  bottom: 220rpx;
  z-index: 10;
  width: 120rpx;
  height: 120rpx;
  movable-view {
    width: 120rpx;
    height: 120rpx;
  }
  image {
    width: 120rpx;
    height: 120rpx;
  }
}
.gallary {
  width: 750rpx;
  height: 341rpx;
  margin: auto;
  position: relative;
  swiper {
    width: 100%;
    height: 341rpx;
    position: relative;
  }
  image {
    width: 100%;
    height: 100%;
  }
  /*用来包裹所有的小圆点  */
  .dots{  
    width: 100%;
    height: 10rpx; 
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 29rpx;
  }  
  /*未选中时的小圆点样式 */
  .dot{  
    width: 10rpx;  
    height: 10rpx;   
    border-radius: 50%;
    margin-right: 9rpx;
    background: rgba(255, 255, 255, 0.4);
  }  
  /*选中以后的小圆点样式  */
  .active{
    width: 33rpx;
    height: 10rpx;
    border-radius: 7rpx;
    background-color: #fff;
  }
}
.homePage{
  height: 100%;
  background: #fafafa;
}
.list-container{
  position: absolute;
  top: 320rpx;
  width: 100%;
  padding-bottom: 60px;
}
.home-btn-wrap {
  display: flex;
  justify-content: space-between;
  height: 203rpx;
  width: 100%;
  padding: 0 40rpx;
  margin-bottom: 30rpx;
  .special{
    width: 100%;
    height: 203rpx;
    position: relative;
    background: #fff;
    border-radius: 12rpx;
      .title{
        position: absolute;
        height: 34rpx;
        font-size: 38rpx;
        font-weight: 600;
        color: #3d549c;
        line-height: 34rpx;
        top: 45rpx;
        left: 60rpx;
      }
      .btn{
        width: 144rpx;
        position: absolute;
        left: 60rpx;
        bottom: 45rpx;
        height: 54rpx;
        font-size: 24rpx;
        line-height: 54rpx;
        color: #fff;
        text-align: center;
        background: linear-gradient(180deg,#3999fd, #1d61ff);
        border-radius: 27rpx;
      }
    image{
      width: 100%;
      height: 100%;
    }
  }
  .left{
    box-shadow: 0px 3rpx 13rpx 0px rgba(222,222,222,0.50);
    border-radius: 18rpx;
    image{
      width: 324rpx;
      height: 360rpx;
    }
  }
  .right{
    display: flex;
    flex-direction: column;
    image{
      width: 324rpx;
      height: 168rpx;
      border-radius: 18rpx;
      box-shadow: 0px 3rpx 13rpx 0px rgba(222,222,222,0.50);
    }
    .materialLibrary{
      margin-bottom: 28rpx;
    }
  }
}
.advertisement{
  width: 670rpx;
  margin: 0 40rpx;
  height: 72rpx;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #e6eef9;
  border-radius: 21rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx 0 23rpx;
  .logo{
    margin-right: 23rpx;
    .ico{
      color:#375dd9;
      font-size: 34rpx;
    }
  }
    image{
      width: 123rpx;
      height: 30rpx;
      margin: 0 19rpx 0 0;
  }
  swiper{
    width: 100%;
    height: 72rpx;
  }
  .text{
    max-width: 390rpx;
    height: 72rpx;
    opacity: 1;
    font-size: 26rpx;
    color: #41485d;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 72rpx;
  }
  i{
    font-size: 24rpx;
  }
}
.count-data {
  padding: 0 40rpx;
  .count-title {
    font-size: 34rpx;
    line-height: 34rpx;
    margin-top: 50rpx;
    margin-bottom: 30rpx;
    position: relative;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }
  .train-pane {
    width: 100%;
    // height: 230rpx;
    margin-bottom: 20rpx;
    display: flex;
    // white-space: nowrap;
    max-height: 672rpx;
    .train-item {
      width: 100%;
      height: 230rpx;
      background: #ffffff;
      border: 1px solid #e6eef9;
      border-radius: 21rpx;
      display:inline-block;
      vertical-align: top;
      padding: 34rpx 30rpx;
      margin-bottom: 30rpx;
      display: flex;
      .status-name {
        width: 90rpx;
        height: 36rpx;
        border-radius: 5rpx;
        font-size: 20rpx;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
      }
      .notStart {
        background: #ffd383;
        color: #b2740d;
      }
      .inProgress {
        background: #7fd99b;
        color: #227210;
      }
      .finished {
        background: #d8d8d8;
        color: #666;
      }
      .imageWrap{
        width: 162rpx;
        height: 162rpx;
        margin-right: 20rpx;
        position: relative;
      }
      image {
        width: 162rpx;
        height: 162rpx; 
      }
      .train-word {
        display: inline-block;
        vertical-align: top;
        flex: 1;
        .train-title {
          font-size: 30rpx;
          color: #41485d;
          font-weight: 500;
          line-height: 42rpx;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .train-desc {
          height: 102rpx;
          margin-top: 17rpx;
          white-space: normal;
          font-size: 24rpx;
          color: #858b9c;
          line-height: 34rpx;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          display: -webkit-box;
          overflow: hidden;
        }
      }
    }
  }
  .count-pane {
    width: 100%;
    height: 140rpx;
    margin: 0 0 20rpx 0rpx;
    padding:0 10rpx;
    display: flex;
    white-space: nowrap;
    background: #ffffff;
    border: 1px solid #e6eef9;
    border-radius: 21rpx;
    .count-item {
      width: 174rpx;
      height: 120rpx;
      padding: 21rpx 20rpx;
      background: #FFFFFF;
      font-weight: 500;
      display:inline-block;
      margin: 10rpx 0;
      vertical-align: top;
      &.active {
        background: linear-gradient(132deg,#7287f6 3%, #4862f4 93%);
        border-radius: 12rpx;
        .count-num, .count-label {
          color: #fff!important;
        }
      }
      .count-num {
        color: #333;
        font-size: 40rpx;
        line-height: 50rpx;
        &.no-data-num {
          font-size: 28rpx;
          line-height: 50rpx;
          color: #999999;
          font-weight: 500;
        }
      }
      .count-label {
        font-size: 24rpx;
        color: #999999;
        
      }
    }
  }
  .no-data {
    height: 280rpx;
    background: @no-data;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    .no-data-text {
      font-size: 26rpx;
      font-weight: 400;
      color: #B4BAC3;
      line-height: 26rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20rpx;
    }
  }
}
.list {
  padding: 0 40rpx;
  .home-no-data {
    text-align: center;
    font-size: 24rpx;
    color: #858b9c;
    margin-top: 103rpx;
    image {
      width: 180rpx;
      height: 168rpx;
    }
  }
}
.my-task {
  .task-item {
    padding: 0 30rpx;
    border: 1px solid #e6eef9;
    border-radius: 16rpx;
    position: relative;
    margin-bottom: 20rpx;
    background: #FFF;
    .task-customer {
      height: 160rpx;
      display: flex;
      padding: 30rpx 0;
      .customer-img image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50rpx;
        margin-right: 30rpx;
      }
      .customer-right {
        width: calc(100% - 130rpx);
        margin-top: 10rpx;
      }
      .customer-head {
        display: flex;
        justify-content: space-between;
        height: 30rpx;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 30rpx;
      }
      .customer-name {
        color: #111111;
        .check-time {
          color: #999;
          font-size: 22rpx;
          float: right;
        }
      }
      .open-vr {
        width: 180rpx;
        height: 60rpx;
        background: #8697f5;
        color: #fff;
        border-radius: 66rpx 0px 0px 66rpx;
        padding: 16rpx 29rpx 16rpx 25rpx;
        position: absolute;
        top: 30rpx;
        right: 0;
        font-size: 26rpx;
        line-height: 26rpx;
        .iconfont {
          color: #fff;
        }
      }
      .customer-tag {
        display: flex;
        // justify-content: space-between;
        font-size: 22rpx;
        line-height: 22rpx;
        margin-top: 18rpx;
        .tag {
          background: #f3f6ff;
          border-radius: 20rpx;
          padding: 9rpx 20rpx;
          margin-right: 14rpx;
          color: #526CEC;
          font-weight: 500;
        }
      }
      .customer-check {
        font-size: 22rpx;
        color: #444444;
        margin-top: 18rpx;
        .check-name {
          color: @blue-font;
          display: inline;
        }
      }
    }
    .task-progress {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-bottom: 50rpx;
      position: relative;
      .progress {
        width: 250rpx;
        border-radius: 8rpx;
        .progress-title {
          display: flex;
          line-height: 54rpx;
          .progress-title-name {
            color: #666666;
            font-size: 26rpx;
            margin-right: 9rpx;
          }
          .progress-num {
            font-size: 32rpx;
            font-weight: 500;
          }
          .progress-total {
            font-size: 26rpx;
            line-height: 60rpx;
          }
        }
        .progress-bar {
          width: 100%;
          height: 16rpx;
          background: #ebeff7;
          border-radius: 8rpx;
          position: relative;
          .progress-bar__inner {
            position: absolute;
            height: 100%;
            left: 0;
            top: 0;
            background: #4761F4;
            border-radius: 8rpx;
          }
        }
      }
      view.task-btn {
        width: 180rpx;
        height: 66rpx;
        display: inline-block;
        font-size: 0;
        background: linear-gradient(135deg,#7489f6, #4761f4);
        border-radius: 78rpx;
        // background-image: @btn-bg;
        // background-repeat: no-repeat;
        // background-size: 100% 100%;
        button.task-btn {
          width: 100%;
          height: 66rpx!important;
          line-height: 66rpx!important;
          font-size: 24rpx;
          font-weight: 500;
          color: #fff;
          background: none;
          &.task-active {
            background: @blue-gradient;
            color: #FFFFFF;
            &[disabled] {
              color: #FFFFFF!important;
            }
          }
          &[disabled] {
            color: #0061E3!important;
          }
        }
      }
      button {
        height: 66rpx!important;
        line-height: 66rpx!important;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
      }
      .practice-btn, .show-btn {
        width: 155rpx;
        margin: 0;
      }
      .practice-btn {
        // background: @train-btn-bg;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 0;
      }
      .show-btn {
        // background: @demonstration-btn-bg;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 0;
      }
    }
    &:not(:last-child)::after {
      content: '';
      width: 100%;
      height: 2rpx;
      background: #EEEEEE;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
  .task-add {
    height: 144rpx;
    background: #FCFDFF;
    border-radius: 8rpx;
    border: 1rpx dotted #B4BAC3;
    font-size: 26rpx;
    font-weight: 500;
    color: #8DAFE1;
    text-align: center;
    padding-top: 10rpx;
  }
  .iconfont {
    color: #8DAFE1;
  }
}
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 630rpx;
  height: 660rpx;
  background: @first-hpage no-repeat;
  background-position: top;
  background-size: 100%;
  border-radius: 30rpx;
  z-index: 9999;
  position: relative;
  .modal-content {
    position: absolute;
    padding: 45rpx;
    bottom: 0;
    view {
      font-size: 30rpx;
      font-weight: 400;
      color: #666666;
      line-height: 46rpx;
    }
    button.btn {
      width: 100%;
      height: 98rpx;
      line-height: 98rpx!important;
      background: #1770E6;
      border-radius: 49rpx;
      color: #fff;
      margin-top: 53rpx;
      padding: 0;
    }
  }
}
.home-title {
  font-weight: 500;
  color: #333333;
  line-height: 34rpx;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.gray-btn {
  height: 34rpx;
  line-height: 34rpx;
  font-size: 26rpx;
  color: #858b9c;
  font-weight: 400;
}
.watch-guide{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 9000;
  .guide-bg-live {
    width: 612rpx;
    height: 526rpx;
    background: url('https://cpl-test.zhilingsd.com/h5/static/img/guide-page-one.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 20rpx;
    top: 340rpx;
  }
  .guide-bg-train{
    width: 670rpx;
    height: 516rpx;
    background: url('https://cpl-test.zhilingsd.com/h5/static/img/guide-page-two.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 18rpx;
    top: 560rpx;
  }
}
.list-tips {
  text-align: center;
  width: 100%;
  margin: 80rpx 0 91rpx;
}
.tips-word {
  position: relative;
  font-size: 26rpx;
  color: #cccccc;
  &::before, &::after {
    content: ' ';
    width: 250rpx;
    height: 2rpx;
    background: #EEEEEE;
    position: absolute;
    top: 50%;
  }
  &::before {
    left: -270rpx;
  }
  &::after {
    right: -270rpx;
  }
}
.mask{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.60);
  position:fixed;
  z-index:888;
  top: 0;
  left: 0;
  .content{
    width: 540rpx;
    height: 600rpx;
    background: #ffffff;
    border-radius: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    >image{
      width: 200rpx;
      height: 200rpx;
    }
    .text{
      height: 34rpx;
      font-size: 34rpx;
      font-weight: 500;
      color: #333333;
      line-height: 34rpx;
      margin-top: 50rpx;
      margin-bottom: 20rpx;
    }
    .desc{
      color: #666;
      height: 28rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 28rpx;
    }
    .sureBtn{
      text-align: center;
      margin-top: 60rpx;
      width: 358rpx;
      height: 68rpx;
      line-height: 68rpx;
      color: #fff;
      background: linear-gradient(99deg,#7c9afa 11%, #4661f4 88%);
      border-radius: 44rpx;
      box-shadow: 0rpx 6rpx 27rpx 0rpx rgba(59,81,241,0.58); 
    }
  }
}